<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="m.jd.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/base2013.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/my.css?r=2" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/header.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/product_list.css" charset="gbk" />
    <link rel="stylesheet" href="/resources/wap/css/framework7_002.css">
    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/self.js?r=1"></script>
    <style type="text/css">
        #data_list{
            background: #fff;
        }
        .cart-group{

            background: #fff;
        }
        .supplier-info{
            background: #f5f5f5;
            height: 40px;
            padding: 10px 10px;
        }
        .cart{
            height: 150px;
            padding:20px 20px;
            padding: 5px;
            border-radius: 5px;
            box-shadow: 3px 3px 3px #555;
        }
        .product-image{
            padding-left: 0px !important;
        }
        input[type='checkbox']{
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }
        .cart-chose{
            float: left;
            width: 30px;
            text-align: center;
            height: 80px;
        }
        .product-info{
            padding-left: 15px;
            float: left;
            height: 80px;
        }
        .price{

            color: #ff0000;
        }
        .num{
            width: 100px;
            border:none;
            border-bottom: 1px solid;
        }
        .total-money{
            width: 100%;
            background: #fdfdfd;
            height: 50px;
            position: fixed;
            bottom: 60px;

        }
        div.money{
            float: left;
            width: 60%;
            height: 100%;
            padding: 10px 0px;
            text-align: center;
        }
        div.order{
            padding: 10px 0px;
            text-align: center;
            float: right;
            width: 40%;
            height: 100%;
            color: #fff;
            font-size: 16px;
            background: #00A000;
        }
        .s-left{
            display: block;
            float: left;
            width: 40%;
        }
        .s-right{
            display: block;
            width: 50%;
            float: right;
        }


    </style>

</head>
<body>

<header>
    <!-- 通用头 div -->
    <div id="m_common_header" style="min-height: 45px; margin-top: 0px;">
        <header class="jd-header">
            <div class="jd-header-bar">
                <div  class="jd-header-icon-back J_ping"
                      onclick="javascript:window.location.href='/html/wap/customer/my.html'">
                    <span></span>
                </div>
                <div class="jd-header-title">
                    我的购物车
                </div>
            </div>

        </header>
    </div>
</header>
<div class="common-wrapper" id="mainLayout">
    <!-- 通知中心 -->
    <div id="makeLocation" style="display:none">
        <div class="order-remind" id="orderRemind" style="display: none;">
            <div class="order-remind-flex" id="orderRemindFlex">
                <em class="order-remind-flex-pic-left"></em>
                <em class="order-remind-flex-pic-right" id="closeRemind"></em>
            </div>
        </div>
    </div>
    <!-- 通知中心 结束-->
    <div class="order-tab bdb-1px">

    </div>
    <div id="div_orderlist">
        <div id="data_list" style="position: relative; display: block;padding:5px;background:#f0f2f5">

        </div>
        <div class="no-order" id="customerDataNote" style="display: block;">
        </div>
        <div class="total-money">
            <div class="money"></div>
            <div class="order" onclick="order()">下单</div>
            <div style="clear: both"></div>
        </div>
        <!--end if-->
    </div>

    <div class="toolbar tabbar tabbar-labels">
        <div class="toolbar-inner">
            <a href="product_list.html" class="tab-link">
                <i class="material-icons"><img src="/resources/wap/image/home.png" width="32px"></i>
                <span class="tabbar-label">首页</span></a>
            <a href="cart.html" class="tab-link active">
                <i class="material-icons"><img src="/resources/wap/image/cart_on.png" width="32px"></i>
                <span class="tabbar-label">购物车</span></a>
            <a href="my.html" class="tab-link ">
                <i class="material-icons"><img src="/resources/wap/image/my.png" width="32px"></i>
                <span class="tabbar-label">我的</span></a></div>
    </div>

</div>
</body>
<script type="text/javascript">
    var _pageFlag = false;
    var params = {
        page: 1,
        size:10
    }
    $().ready(function () {
        loadData();
    });
    function loadData(){

        $.ajax({
            url:"/wap/customer/cart/queryPage.json?r="+Math.random(),
            data:params,dataType:'json',
            type:'post',
            success:function(data){
                if(data.success) {
                    if(data.data.data==null||data.data.data.length==0){
                        $("#data_list").html("");
                        $("#customerDataNote").html("<div class='noorder-pic' style='font-size:0.75rem;color:#bfbfbf;'>" +
                            "<span style='display:block;margin-top:20px;text-align: center;'>没有更多数据了</span></div>");
                    }else{
                        $("#data_list").html("");

                        $.each(data.data.data,function(i,cartGroup){
                            var supplier = cartGroup.supplier;
                            var cartWarpperList = cartGroup.cartWarpperList;
                            var supplierName = supplier.name;
                            var html = "";
                            var cartHtml = "";
                            $.each(cartWarpperList,function (j,cart) {
                                var product  = cart.product;
                                var norm = null2empty(cart.norm);
                                var num = cart.num;
                                var price = cart.price;
                                var image = product.image;
                                cartHtml = cartHtml+"<div class='cart'>" +
                                        "<div class='cart-chose'>" +
                                        " <input class='select-cart' type='checkbox' supplier='"+supplier.id+"' cart='"+cart.id+"'>"+
                                        "</div>"+
                                        "<div class='product-image' style='background-image: url(\""+image+"\")'>" +

                                        "</div>"+
                                        "<div class='product-info'>" +
                                           "<div><span>"+product.name+"</span></div>"+

                                           "<div>" +
                                             "<span class='s-left'>规格:</span>"+
                                             "<span class='s-right' cart='"+cart.id+"'  >"+norm+"</span>" +
                                           "</div>"+
                                           "<div style='padding-top: 10px;'>" +
                                             "<span class='s-left'>单价:</span>"+
                                             "<span class='s-right price'  cart='"+cart.id+"' price='"+price+"'>¥"+price+"元</span>" +
                                            "</div>"+
                                            "<div style='padding-top: 10px;'>" +
                                              "<span class='s-left'>数量:</span>"+
                                              "<span class='s-right'><input class='num' value='"+num+"' cart='"+cart.id+"' ></span>"+
                                           "</div>"+
                                        "</div>"+
                                        "<div style='clear: both'></div>"+
                                    "</div>";
                            });

                            html = html + "<div class='cart-group'>" +
                                    "<div class='supplier-info' >" +
                                        "<input type='checkbox' class='supplier-choose' supplier='"+supplier.id+"' >"+
                                        "<span>"+supplierName+"</span>"+
                                    "</div>"+
                                    cartHtml+
                                    "</div>"+
                                    "<div style='height:20px;width:100%'></div>";

                            $("#data_list").append(html);
                            bindNumChange();
                            bindCartSelectChange();
                        });
                    }
                    bindSupplierClick();
                    if (data.data.pageNo < data.data.pageTotal) {
                        _pageFlag = true;

                    }else{
                        //  $("#customerDataNote").html("<div ><span>没有更多订单了</span></div>");
                    }
                }
            }
        });
    }
    $(window).scroll(function () {
        if (_pageFlag) {
            if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
                _pageFlag = false;
                params['page'] = params['page'] + 1;
                loadData();
            }
        }
    });
    function addProduct(id) {
        window.location.href="product_edit.html?productId="+id;
    }
    function order() {
        var cartIdArray = new Array();
        $(".select-cart:checked").each(function () {
            var cartId = $(this).attr("cart");
            cartIdArray.push(cartId);
        });
        if(cartIdArray.length<=0){
            alert("请选择产品！");
            return;
        }
        $.ajax({
            url: "/wap/customer/order/addByCartIdList.do",
            contentType : "application/json ; charset=utf-8",
            data: JSON.stringify(cartIdArray),
            dataType: 'json',
            type: 'post',
            success: function (data) {
                console.log(data);
                if (data.success) {
                    alert("下单成功");
                    window.location.href="order_list.html";
                } else {
                    alert(data.msg);
                }
            }
        });
    }

    function bindNumChange() {
        $(".num").blur(function () {
           var num =  $(this).val();
           var id = $(this).attr("cart");
           updateCart(id,num);
           showMoney();
        })
    }
    function bindCartSelectChange() {
        $("input[type=checkbox]").click(function () {
            showMoney();
        });

    }
    function updateCart(id,num) {
        if(!isNumber(num)){
            alert("购买数量必须为数字!");
            return;
        }
        var params = {"id":id,
            "num":num};
        $.ajax({
            url: "/wap/customer/cart/updateCart.do",
            data: params,
            dataType: 'json',
            async:false,
            type: 'post',
            success: function (data) {
                console.log(data);
                if (data.success) {
                } else {
                    alert(data.msg);
                }
            }
        });
    }
    function showMoney() {
        var money = 0;
        $(".select-cart:checked").each(function () {
            var cartId = $(this).attr("cart");
            var num =  $(".num[cart='"+cartId+"']").val();
            var price = $("[cart='"+cartId+"'][price]").attr("price");
            money = money+ price *num;
        });
        $(".money").html("¥"+money+"元");
    }
    function bindSupplierClick() {
        $(".supplier-choose").click(function () {
            var  supplierId =  $(this).attr("supplier");
            if($(this).is(':checked')){
                $(".select-cart[supplier='"+supplierId+"']").prop("checked",true);
            }else {
                $(".select-cart[supplier='"+supplierId+"']").removeProp("checked");
            }



        });
    }
</script>
</html>